<template>
    <div class="room-manage-main">
        <div class="d-flex align-items-center justify-content-between mt-10 pl-5 pr-5">

            <div class="d-flex align-items-center w-percent-100">
                <div class="d-flex align-items-center ml-5 mr-5">
                    <p style="white-space: nowrap" class="mr-5 font-16">栋数：</p>
                    <el-select v-model="building" placeholder="请选择">
                        <el-option
                                v-for="item in buildingList"
                                :key="item"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </div>
                <div class="d-flex align-items-center ml-5 mr-5">
                    <p style="white-space: nowrap" class="mr-5 font-16">楼层：</p>
                    <el-select v-model="floorNum" placeholder="请选择">
                        <el-option
                                v-for="item in floorList"
                                :key="item"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </div>
                <div class="d-flex align-items-center ml-5 mr-5">
                    <p style="white-space: nowrap" class="mr-5 font-16">房号：</p>
                    <el-input v-model="roomNum" placeholder="请输入房号"></el-input>
                </div>
                <div class="d-flex align-items-center ml-5 mr-5">
                    <p style="white-space: nowrap" class="mr-5 font-16">房类型:</p>
                    <el-select v-model="roomstatus" placeholder="请选择">
                        <el-option
                                v-for="item in Roomstatus"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>

            </div>

            <div class="d-flex align-items-center ml-5 mr-5">
                <el-button type="primary" @click="getRoomList">查询</el-button>
                <el-button type="danger" @click="reset">重置</el-button>
            </div>


        </div>
        <div class="d-flex justify-content-end" style="padding: 10px;">
            <el-button type="primary" style="width: 100px;" @click="addRoom">添加</el-button>
        </div>

        <ul class="mt-10 room-list d-flex flex-wrap">
            <li class="cursor" v-for="(item,index) in roomList" @click="roomHandle(item)">
                <span :class="classList[item.status]" class="iconfont icon-menleianzhuang"></span>
                <h3 >
                    {{ item.name }}</h3>
                <p>{{ statusList[item.status] }}</p>
            </li>
        </ul>

        <!--    第一层对话框,操作层-->
        <el-dialog
                :title="current.name"
                :visible.sync="roomHandleVisible"
                width="420px"
        >
            <p class="text-left ml-10">房间信息：</p>
            <el-button
                    class="mr-10"
                    @click="checkRoom"
            >房间详情
            </el-button>
            <el-button
                    type="primary"
                    class="ml-10 mb-10 mt-10 mr-10"
                    @click="editRoom"
            >编辑房间
            </el-button>
            <el-button
                    type="info"
                    class="ml-10 mb-10 mt-10"
                    :disabled="current.status != 1"
                    @click="checkInInfo"
            >入住信息
            </el-button>
            <p class="text-left mt-10 ml-10">房间操作：</p>
            <el-button
                    type="success"
                    class="mr-10 mt-10"
                    :disabled="current.status != 0"
                    @click="checkInHandler"
            >登记入住
            </el-button>
            <el-button
                    type="success"
                    class="mr-10 mt-10"
                    :disabled="current.status != 1"
                    @click="changeRoomHandler"
            >退 房
            </el-button>



        </el-dialog>

        <el-dialog
                :title="current.name + '入住'"
                :visible.sync="checkInVisible"
                width="30%"
                custom-class="min-w-450"
        >
            <el-form ref="form" label-width="100px">
                <el-form-item label="身份证号：" style="margin-top: 25px">
                    <el-input v-model="checkInForm.idCard"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="checkInVisible = false">取 消</el-button>
            <el-button type="primary" @click="checkIn">确 定</el-button>
      </span>
        </el-dialog>

        <!--    隔离房间入住信息dialog-->
        <el-dialog
                :title="current.name + '入住信息'"
                :visible.sync="checkInInfoVisible"
                width="30%"
                custom-class="min-w-450"
        >
            <div class="content">
                <div class="d-flex align-items-center mb-15">
                    <p class="w-100 text-left">姓名:</p>
                    <el-input
                            style="width: 350px;"
                            placeholder="请输入名称"
                            :disabled="true"
                            v-model="checkInInfoData.nickname"
                            clearable>
                    </el-input>
                </div>
                <div class="d-flex align-items-center mb-15">
                    <p class="w-100 text-left">身份证:</p>
                    <el-input
                            style="width: 350px;"
                            placeholder="请输入身份证"
                            :disabled="true"
                            v-model="checkInInfoData.idCard"
                            clearable>
                    </el-input>
                </div>
                <div class="d-flex align-items-center mb-15">
                    <p class="w-100 text-left">手机号:</p>
                    <el-input
                            style="width: 350px;"
                            placeholder="请输入手机号"
                            :disabled="true"
                            v-model="checkInInfoData.phone"
                            clearable>
                    </el-input>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="checkInInfoVisible = false">取 消</el-button>
      </span>
        </el-dialog>

        <!--    隔离房间换房dialog-->
        <el-dialog
                :title="current.name + '退房'"
                :visible.sync="changeRoomVisible"
                width="30%"
                custom-class="min-w-450"
        >
            <el-form ref="form" label-width="100px">
                <el-form-item label="身份证号：" style="margin-top: 25px">
                    <el-input v-model="idCard"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="changeRoomVisible = false">取 消</el-button>
            <el-button type="primary" @click="changeRoom">确 定</el-button>
      </span>
        </el-dialog>

        <!--    详情/编辑表单-->
        <el-dialog
                :title="current.name + current.infoTitle"
                :visible.sync="infoVisible"
                width="40%"
                custom-class="min-w-650"
        >
            <div class="d-flex flex-row mt-10">
                <div class="blue-label"></div>
                <p style="font-weight: bold">房间基础信息</p>
            </div>
            <div class="contont">
                <div class="d-flex align-items-center mb-15">
                    <p class="w-100 text-left">名称:</p>
                    <el-input
                            style="width: 350px;"
                            placeholder="请输入名称"
                            :disabled="current.infoMode == 'check'"
                            v-model="form.name"
                            clearable>
                    </el-input>
                </div>
                <div class="d-flex align-items-center mb-15">
                    <p class="w-100 text-left">栋数:</p>
                    <el-select
                            :disabled="current.infoMode == 'check'"
                            v-model="form.building"
                            placeholder="请选择">
                        <el-option
                                v-for="item in buildingList"
                                :key="item"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </div>
                <div class="d-flex align-items-center mb-15">
                    <p class="w-100 text-left">楼层:</p>
                    <el-input
                            style="width: 350px;"
                            placeholder="请输入楼层"
                            :disabled="current.infoMode == 'check'"
                            v-model="form.floor"
                            clearable>
                    </el-input>
                </div>
                <div class="d-flex align-items-center mb-15">
                    <p class="w-100 text-left">描述:</p>
                    <el-input
                            style="width: 350px;"
                            placeholder="请输入描述内容"
                            :disabled="current.infoMode == 'check'"
                            v-model="form.description"
                            clearable>
                    </el-input>
                </div>

                <div class="d-flex align-items-center mb-15">
                    <p class="w-100 text-left">房间大小:</p>
                    <el-input
                            style="width: 350px;"
                            placeholder="请输入描述内容"
                            :disabled="current.infoMode == 'check'"
                            v-model="form.roomSize"
                            clearable>
                    </el-input>
                </div>
                <div class="d-flex align-items-center mb-15">
                    <p class="w-100 text-left">水表数:</p>
                    <el-input
                            style="width: 350px;"
                            placeholder="请输入水表数"
                            :disabled="current.infoMode == 'check'"
                            v-model="form.water"
                            clearable>
                    </el-input>
                </div>
                <div class="d-flex align-items-center mb-15">
                    <p class="w-100 text-left">用电量:</p>
                    <el-input
                            style="width: 350px;"
                            placeholder="请输入用电量"
                            :disabled="current.infoMode == 'check'"
                            v-model="form.electricity"
                            clearable>
                    </el-input>
                </div>
                <div class="d-flex align-items-center mb-15">
                    <p class="w-100 text-left">管理费:</p>
                    <el-input
                            style="width: 350px;"
                            placeholder="请输入管理费"
                            :disabled="current.infoMode == 'check'"
                            v-model="form.managementFee"
                            clearable>
                    </el-input>
                </div>
                <div class="d-flex align-items-center mb-15">
                    <p class="w-100 text-left">房间状态:</p>
                    <el-select
                            :disabled="current.infoMode == 'check'"
                            v-model="form.status"
                            placeholder="请选择">
                        <el-option
                                v-for="item in Roomstatus"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select>

                </div>

            </div>



            <span slot="footer" class="dialog-footer">
        <el-button @click="infoVisible = false">取 消</el-button>
        <el-button v-if="current.infoMode != 'check'" type="primary" @click="confirmEdit">确 定</el-button>
      </span>

        </el-dialog>

    </div>
</template>

<script>
    import {formDataPost, get, post} from "../utils/request";
    // import { isJSON } from "../utils/isJSON";

    export default {
        name: "RoomManage",
        data() {
            return {
                roomHandleVisible: false,
                checkInVisible: false,
                infoVisible: false,
                isolationCheckOutVisible: false,
                ws: null,
                roomList: [],
                floorList: [
                    "1楼", "2楼"
                ],
                buildingList: [
                    "1栋", "2栋"
                ],
                Roomstatus: [
                    {
                        value: 0,
                        label: '未入住'
                    }, {
                        value: 1,
                        label: '已入住'
                    }
                ],
                roomstatus:'',
                roomTypeList: [],
                classList: ['status-0', 'status-1', 'status-2', 'status-3'],
                statusList: ['未入住', '已入住', '已预订', '暂定', '待消毒'],
                roomNum: '',
                building: '',
                floorNum: '',
                roomType: '',
                idCard:'',
                changeRoomVisible: false,
                checkInInfoVisible: false,
                ableUseRoom: [],
                newRoomId: undefined,
                current: {
                    id: undefined,
                    name: undefined,
                    status: undefined,
                    infoMode: "check",
                    infoTitle: "房间详情",
                },
                checkInInfoData: {
                    name: '',
                    idCard: '',
                    phone: '',
                    email: '',
                    type: ''
                },
                form: {
                    id: undefined,
                    name: undefined,
                    type: undefined,
                    floor: undefined,
                    direction: undefined,
                    status:undefined,
                },

                checkInForm: {
                    id: undefined,
                    idCard: undefined,
                },
                typeOptions: [{
                    value: 0,
                    label: '密接'
                }, {
                    value: 1,
                    label: '应隔尽隔人员'
                }, {
                    value: 2,
                    label: '入境人员'
                }, {
                    value: 3,
                    label: '自行进入中高风险地区人员'
                }],
            }
        },
        mounted() {
            this.getRoomList()

        },
        methods: {


            getRoomList() {
                let data = {
                    building: this.building,
                    status:this.roomstatus,
                    floor: this.floorNum,
                    name: this.roomNum,
                    type: this.roomType,
                }
                post('/api/room/list', data)
                    .then(res => {
                        console.log(res);
                        this.roomList = res.data.data
                    })
                    .catch(err => {
                        console.log(err);
                    })
            },

            getFloorList() {
                get("/api/room/floor").then(res => {
                    this.floorList = res.data.data
                })
            },


            changeRoomHandler() {
                this.changeRoomVisible = true
            },
            changeRoom() {
                let data = {
                    id: this.current.id,
                    idCard: this.idCard
                }
                console.log("111",data)
                post("api/room/checkOut", data).then(res => {
                    if (res.data.code === "200") {
                        this.$notify.success({
                            title: '成功',
                            message: "退房成功"
                        });
                        this.changeRoomVisible = false
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'error'
                        });
                    }
                })
            },
            checkInInfo() {
                this.checkInInfoData = {
                    name: '',
                    idCard: '',
                    phone: '',
                    email: '',
                    type: ''
                }
                get("api/room/checkInfo/" + this.current.id).then(res => {
                    if (res.data.code === "200") {
                        this.checkInInfoData = res.data.data
                        this.checkInInfoVisible = true
                    } else {
                        this.$notify.error({
                            title: '错误',
                            message: res.data.msg
                        });
                    }
                })
            },
            roomHandle(item) {
                // alert(item.id)
                this.current = item

                this.roomHandleVisible = true
            },

            confirmEdit() {
                this.form.id = this.current.id
                let data = this.form
                if (typeof (this.form.id)!='undefined' ){
                    post("/api/room/modify", data).then(res => {
                        if (res.data.code === "200") {
                            this.$notify.success({
                                title: '成功',
                                message: "修改成功"
                            });
                            this.infoVisible = false
                            // this.getRoomList()
                        } else {
                            this.$notify.error({
                                title: '错误',
                                message: res.data.msg
                            });
                        }
                    })
                }else{
                    post("/api/room/add", data).then(res => {
                        if (res.data.code === "200") {
                            this.$notify.success({
                                title: '成功',
                                message: "添加成功"
                            });
                            this.infoVisible = false
                            // this.getRoomList()
                        } else {
                            this.$notify.error({
                                title: '错误',
                                message: res.data.msg
                            });
                        }
                    })
                }
            },

            checkInHandler() {
                this.checkInForm = {
                    id: this.current.id,
                    idCard:this.idCard
                }
                this.checkInVisible = true
            },

            checkOutHandler() {
                let that = this
                get("/api/room/checkOut/" + this.current.id).then(res => {
                    that.roomHandleVisible = false
                    console.log(res);
                    if (res.data.code == 200) {
                        this.$message({
                            message: '退房成功！',
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'error'
                        });
                    }
                    // alert(res.data.data)
                })
            },

            checkIn() {
                let data = this.checkInForm
                let that = this
                post("/api/room/checkIn", data).then(res => {
                    if (res.data.code === "200") {
                        that.roomHandleVisible = false
                        that.checkInVisible = false
                        console.log(res);
                        this.$message({
                            message: `入住成功`,
                            type: 'success',

                        });
                        // alert("订单号:" + orderId + "\n总价:" + fee + "元\n折后价:" + lastFee + "元")
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'error',
                            duration: 2000
                        });
                    }

                })
            },

            checkRoom() {
                this.current.infoMode = "check"
                this.current.infoTitle = "房间信息详情"
                console.log("this.current.id", this.current.id)
                get("/api/room/get/" + this.current.id).then(res => {
                    console.log("getDetail", res)
                    this.form = res.data.data
                })
                this.infoVisible = true
            },

            editRoom() {
                this.checkRoom()
                this.current.infoMode = "edit"
                this.current.infoTitle = "房间信息编辑"
                this.infoVisible = true //
            },
            addRoom(){
                this.current.infoMode = "edit"
                this.current.name = ""
                this.current.infoTitle = "房间信息编辑"
                this.infoVisible = true //
            },
            reset() {
                this.building = ''
                this.roomNum = ''
                this.floorNum = ''
                this.roomstatus = ''
                this.getRoomList()
            }

        }
    }
</script>

<style scoped>
    .room-manage-main {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: calc(100vh - 120px);
        /*height: 100%;*/
        background: #FFFFFF;
        box-shadow: 0px 5px 30px 0px rgba(22, 115, 255, 0.1);
    }

    .room-list {
        padding: 10px 20px;
    }

    .room-list li {
        /*margin: 10px;*/
        position: relative;
        color: gray;
    }

    .room-list li > span {
        font-size: 220px;
    }

    .room-list li h3 {
        font-size: 22px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 23%;
    }

    .room-list li h5 {
        font-size: 18px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 38%;
    }

    .room-list li p {
        font-size: 14px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 66%;
    }

    .status-0 {
        color: #67C23A;
    }

    .status-1 {
        color: #F56C6C;
    }

    .status-2 {
        color: #E6A23C;
    }

    .status-3 {
        color: purple;
    }

    .status-4 {
        color: #909399;
    }

    .contont {
        margin: 10px 60px 30px 36px;
    }


</style>
